<template>
  <el-container class="container">
    <el-aside :width="isCollapse?'68px':'220px'">
        <AsideMenu></AsideMenu>
    </el-aside>
    <el-container>
        <el-header>
            <HomeHeader></HomeHeader>
        </el-header>
        <el-main>
            <tabs></tabs>
            <!--二级路由的出口-->
            <keep-alive>
                 <router-view v-if="$route.meta.isKeepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.isKeepAlive"></router-view>

        </el-main>
        <el-footer class="footer">
            Copyright &copy;2024 蜗牛学苑前端18期
        </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import AsideMenu from '@/views/AsideMenu.vue'
import HomeHeader from '@/views/HomeHeader.vue'
import {createNamespacedHelpers} from 'vuex'
import Tabs from '@/components/Tabs.vue'
const {mapState:mapMenusState}=createNamespacedHelpers('menus')
export default {
    name:'Home',
    components:{
        AsideMenu,HomeHeader,
        Tabs
    },
    computed:{
        ...mapMenusState(['isCollapse'])
    }
}
</script>

<style lang="scss" scoped>
    .container{
        min-height: 100vh;
        .el-aside{
            background-color: #001529;
        }
        .el-header{
            background: #fff;
        }
        .el-main{
            background: #f5f5f5;
        }
        .el-footer{
             background: #fff;
             display: flex;
             justify-content: center;
             align-items: center;
        }

    }
</style>